<!DOCTYPE html>
<html xmanifest="music.manifest">
<head>
<title>iUI Music More w/Tabs</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="icon" type="image/png" href="../../iui/iui-favicon.png">
<link rel="apple-touch-icon" href="../../iui/iui-logo-touch-icon.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />

<link rel="stylesheet" href="../../iui/iui.css" type="text/css" />
<link rel="stylesheet" title="Default" href="../../iui/t/default/default-theme.css"  type="text/css"/>
<link rel="alternate stylesheet" title="Default using Gradients" href="../../iui/t/defaultgrad/defaultgrad-theme.css"  type="text/css"/>
<link rel="alternate stylesheet" title="iPhoneDevCamp" href="../../iui/t/ipdc/ipdc-theme.css"  type="text/css"/>

<link rel="stylesheet" href="../../iui/ext-sandbox/iscroll/iui-iscroll.css" type="text/css" />

<script type="application/x-javascript" src="../../iui/iui.js"></script>
<script type="application/x-javascript">iui.animOn = true;</script>
<script type="application/x-javascript" src="../../iui/js/iui-theme-switcher.js"></script>
<script type="application/x-javascript" src="../../iui/ext-sandbox/cache-manager/iui-cache-manager.js"></script>
<script type="application/x-javascript" src="../../iui/ext-sandbox/iscroll/iscroll.js"></script>
<script type="application/x-javascript" src="../../iui/ext-sandbox/iscroll/iui-iscroll.js"></script>
<script type="application/x-javascript" src="music-app.js"></script>
  <script language="JavaScript" type="text/javascript">
function toggleExpando()
{
	var expandoEl = document.getElementById('expando');
	if (iui.hasClass(expandoEl, 'expanded'))
	{
		iui.removeClass(expandoEl, 'expanded');
	}
	else
	{
		iui.addClass(expandoEl, 'expanded');
	}
	var viewDiv = document.getElementById('expando-div');
	if (viewDiv)
	{
		var scrollDiv = viewDiv.querySelector('.scroller');
		if (scrollDiv)
		{
			scrollDiv.scroller.refresh();
			var newX = 0;
			var newY = -1 * expandoEl.offsetTop;
			console.log("newY is  " + newY);
			scrollDiv.scroller.scrollTo(newX, newY, '10ms');
		}
	}	
}
  </script>

<style type="text/css">
.expando 
{
color:Navy;
font-weight:italic;
background-color: white;
height:100px;
}

.expanded
{
color:Red;
font-style:bold;
height:800px;
}
</style>
</head>

<body>
    <div class="toolbar">
        <h1 id="pageTitle"></h1>
        <a id="backButton" class="button" href="#"></a>
        <a class="button" href="#searchForm">Search</a>
    </div>
    
 	<div id="more" title="More" selected="true"><div class="wrapper"><div class="scroller">
 	<ul >
        <li><a href="#settings">Settings</a></li>
        <li><a href="stats.gtpl">Stats</a></li>
        <li><a href="#themes">Theme Switcher</a></li>
        <li><a href="#iui-cache-panel">HTML5 WebApp Cache</a></li>
        <li><a href="http://code.google.com/p/iui/" target="_self">About</a></li>
        <li><a href="#expando-div">Expanding Div</a></li>
        <li><a href="#expando">Expando 2-step</a></li>
        <li><a href="#skipnav-test">SkipNav Test</a></li>
        <li><a href="#swipe-2">Swipe Test</a></li>        
        <li>Nothing</li>
    </ul>
    </div></div></div>
    


 	<div id="skipnav-test" title="SkipNav Test"><div class="wrapper"><div class="scroller">
    <ul>
      <li><a href="#panel">Link to panel</a></li>
      <li><a href="#panel" target="_skipnav">Link to panel w/_skipnav</a></li>
    </ul>
    </div></div></div>


 	<div id="panel" title="Int Panel"><div class="wrapper"><div class="scroller">
      <h2>Internal Panel</h2>
    </div></div></div>


    <div id="expando-div" title="Expando" class="panel"><div class="wrapper"><div class="scroller">
		<h2>Expanding Div Test</h2>
		<h2>Expanding Div Test</h2>
		<h2>Expanding Div Test</h2>
		<h2>Expanding Div Test</h2>
		<h2>Expanding Div Test</h2>
		<h2>Expanding Div Test</h2>
		<h2>Expanding Div Test</h2>
		<h2>Expanding Div Test</h2>
		<h2>Expanding Div Test</h2>
		<div id="expando" class="expando expanded">
			<span>Text in an Expanding Div</span>
		</div>
		<a class="whiteButton" href="javascript:toggleExpando()">Toggle Expando</a>
    </div></div></div>

 	<div id="swipe-1" title="Swipe1"><div class="wrapper"><div class="scroller">
      <h2>#1</h2>
 	  <a class="swipeleft" target="_skipnav" href="#swipe-2">2</a>
    </div></div></div>

 	<div id="swipe-2" title="Swipe2"><div class="wrapper"><div class="scroller">
      <h2>#2</h2>
 	  <a class="swiperight" target="_skipnav" href="#swipe-1">1</a>
 	  <a class="swipeleft" target="_skipnav" href="#swipe-3">3</a>
    </div></div></div>

 	<div id="swipe-3" title="Swipe3"><div class="wrapper"><div class="scroller">
      <h2>#3</h2>
 	  <a class="swiperight" target="_skipnav" href="#swipe-2">2</a>
    </div></div></div>

    <div id="themes" class="panel" title="Theme Switcher"><div class="wrapper"><div class="scroller">
        <h2>Theme Switcher</h2>
        <form id="theme-form" onsubmit="return iui.ts.themeSubmit(this)" method="">
            <select onchange="return iui.ts.themeSelect(this)" name="themeSelect" size="1" onblur="scrollTo(0,0)">
                <option>Default</option>
                <option>Default using Gradients</option>
                <option>iPhoneDevCamp</option>
            </select>
           <!-- <input type="submit" name="submit" value="Set"/> -->
        </form>
    </div></div></div>

	<form id="searchForm" class="dialog" action="search.gtpl" method="GET">
        <fieldset>
            <h1>Music Search</h1>
            <a class="button leftButton" type="cancel">Cancel</a>
            <a class="button blueButton" type="submit">Search</a>
            
            <label>Artist:</label>
            <input id="artist" type="text" name="artist"/>
            <label>Song:</label>
            <input type="text" name="song"/>
        </fieldset>
    </form>

    <div id="settings" title="Settings" class="panel"><div class="wrapper"><div class="scroller">
        <h2>Playback</h2>
        <fieldset>
            <div class="row">
                <label>Repeat</label>
                <div class="toggle" onclick=""><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
            </div>
            <div class="row">
                <label>Shuffle</label>
                <div class="toggle" onclick="" toggled="true"><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
            </div>
        </fieldset>
        
        <h2>User</h2>
        <fieldset>
            <div class="row">
                <label>Name</label>
                <input type="text" name="userName" value="johnappleseed" onblur="scrollTo(0,0)"/>
            </div>
            <div class="row">
                <label>Password</label>
                <input type="password" name="password" value="delicious" onblur="scrollTo(0,0)"/>
            </div>
            <div class="row">
                <label>Confirm</label>
                <input type="password" name="password" value="delicious"/>
            </div>
        </fieldset>
    </div></div></div>
    
    <div id="iui-cache-panel" class="panel" title="Cache"><div class="wrapper"><div class="scroller">
        <h2>Status</h2>
        <fieldset>
            <div class="row">
                <label>On Line</label>
                <span class="iui-online-status">?</span>
            </div>
            <div class="row">
                <label>Cache</label>
                <span class="iui-cache-status">?</span>
            </div>
        </fieldset>
        <a class="whiteButton iui-cache-update-button" type="button" target="_noop">Update Cache</a>
        <a class="grayButton iui-cache-swap-button" type="button" target="_noop">Swap Cache</a>        
    </div></div></div>
 
    <div id="tabbar">
    	<a href="music-artists.html" target="_webapp"><img src="img/music-tab.png"/></a>
    </div>

</body>
</html>
